<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <title>分页1</title>

    <style>
	    div {
			width:100px;
			height:100px;
			background:red;
			position:absolute;
			left:0;
			top:0;
		}
	</style>
    
</head>
<body>
 	<div></div>
	
</body>
<script>
		window.onload = function() {
	    var oDiv = document.body.children[0];

	    var iSpeedX = 3;
	    var iSpeedY = 3;

	    setInterval(function() {
	        var l = oDiv.offsetLeft + iSpeedX;
	        var t = oDiv.offsetTop + iSpeedY;

	        if (t > document.documentElement.clientHeight - oDiv.offsetHeight) {
	            t = document.documentElement.clientHeight - oDiv.offsetHeight;
	            iSpeedY *= -1;
	        }
	        if (l > document.documentElement.clientWidth - oDiv.offsetWidth) {
	            l = document.documentElement.clientWidth - oDiv.offsetWidth;
	            iSpeedX *= -1;
	        }

	        if (t < 0) {
	            t = 0;
	            iSpeedY *= -1;
	        }
	        if (l < 0) {
	            l = 0;
	            iSpeedX *= -1;
	        }

	        oDiv.style.left = l + 'px';
	        oDiv.style.top = t + 'px';
	    }, 16);
	};
	</script>
</html>